<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义标题栏</title>
    <link rel="stylesheet" href="https://unpkg.com/98.css" />
    <style>
      /* 布局 */
      html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
        display: flex;
      }
      .window {
        flex: auto;
      }
      /* 窗口拖动 */
      .title-bar {
        -webkit-app-region: drag;
        & .title-bar-controls {
          -webkit-app-region: no-drag;
        }
      }
      /* 最大化与全屏 */
      .title-bar-controls [data-cmd="restore"],
      [data-cmd="leaveFullscreen"] {
        display: none;
      }
      .window.maximize .title-bar-controls {
        & [data-cmd="maximize"] {
          display: none;
        }
        & [data-cmd="restore"] {
          display: block;
        }
      }
      .window.fullscreen {
        & .title-bar,
        [data-cmd="enterFullscreen"] {
          display: none;
        }
        & [data-cmd="leaveFullscreen"] {
          display: block;
        }
      }
    </style>
  </head>
  <body>
    <div class="window" style="width: 300px">
      <div class="title-bar">
        <div class="title-bar-text">A Window With Stuff In It</div>
        <div class="title-bar-controls">
          <button data-cmd="minimize" aria-label="Minimize"></button>
          <button data-cmd="maximize" aria-label="Maximize"></button>
          <button data-cmd="restore" aria-label="Restore"></button>
          <button data-cmd="close" aria-label="Close"></button>
        </div>
      </div>
      <div class="window-body">
        <p>There's so much room for activities!</p>
        <button data-cmd="enterFullscreen">Enter Fullscreen</button>
        <button data-cmd="leaveFullscreen">Leave Fullscreen</button>
      </div>
    </div>
    <script>
      const win = nw.Window.get();
      const $window = document.querySelector(".window");
      const $titleBar = document.querySelector(".title-bar");

      document.querySelectorAll("[data-cmd]").forEach((el) => {
        el.addEventListener("click", () => {
          win[el.dataset.cmd]();
        });
      });

      win.on("maximize", () => {
        $window.classList.add("maximize");
      });
      win.on("enter-fullscreen", () => {
        $window.classList.add("fullscreen");
      });
      win.on("restore", () => {
        $window.classList.remove("maximize", "fullscreen");
      });
      win.on("blur", () => {
        $titleBar.classList.add("inactive");
      });
      win.on("focus", () => {
        $titleBar.classList.remove("inactive");
      });
    </script>
  </body>
</html>
